<template>
  <div class="table" :class="{ tableClass: tableClass ? 'tableClass' : '' }">
    <el-table
      @row-click="handleRowClick"
      @keydown="handleKeydown"
      v-loading="isLoading"
      :header-cell-style="headerStyle"
      :cell-style="cellStyle"
      :data="tableData"
      border
      style="width: 100%"
      :height="height"
      class="f12"
      :show-summary="summary"
      :summary-method="getSummaries"
      @selection-change="selectList"
      @sort-change="sortChange"
      highlight-current-row
      :row-key="rowKey"
      ref="multipleTableRef"
      :cell-class-name="cellClassName"
      header-cell-class-name=""
      @header-dragend="headerDragend"
      @header-contextmenu="openMenu"
    >
      <el-table-column :selectable="selectable" align="center" type="selection" width="40" v-if="selection" class="el-checkbox" />
      <template v-for="(item, index) in TableHeader" :key="index">
        <!-- 多级表头 -->
        <el-table-column :fixed="item.fixed" :label="(item as any).label" v-if="item.Multistage" align="center" show-overflow-tooltip="none">
          <el-table-column
            align="center"
            :prop="columns.prop"
            :label="$t((columns as any).label)"
            v-for="columns in item.children"
            :width="(columns as any).width"
          >
            <template #default="scope">
              <!-- select列 -->
              <el-select v-if="columns.type === 'select'" v-model="scope.row[columns.prop].selectValue" placeholder="" size="small">
                <el-option v-for="option in scope.row[columns.prop].options" :key="option.key" :label="option.label" :value="option.value" />
              </el-select>
              <el-checkbox
                v-if="columns.type === 'checkbox'"
                v-model="scope.row[columns.prop]"
                :disabled="!scope.row.change || columns.disable"
                @change="$emit('checkboxChange', item.prop, scope.row)"
              />
              <el-tooltip
                v-if="columns.type === 'tooltip'"
                class="box-item"
                effect="dark"
                :content="scope.row[columns.prop].tooltipVal"
                placement="top"
              >
                <span>{{ scope.row[columns.prop].value }}</span>
              </el-tooltip>
              <!-- 带背景颜色的列 -->
              <span
                v-if="columns.bgColor"
                :style="{ backgroundColor: columns.bgColor ? scope.row[columns.prop].bgColor : 'white' }"
                style="width: 100%"
              >
                {{ scope.row[columns.prop].value }}
              </span>
              <!-- 带背景颜色的列（根据backgroundColor判断） -->
              <div
                v-else-if="columns.backgroundColor"
                :style="{ backgroundColor: scope.row.backgroundColor, width: '100%' }"
                @click="$emit('currentRow', scope.row, columns.label)"
              >
                <span style="width: 100%">{{ scope.row[columns.prop] }}</span>
              </div>
              <div
                v-else-if="columns.backgroundColor2"
                :style="{ backgroundColor: scope.row.backgroundColor2, width: '100%' }"
                @click="$emit('currentRow', scope.row)"
              >
                <span style="width: 100%">{{ scope.row[columns.prop] }}</span>
              </div>
              <div
                v-else-if="columns.backgroundColor3"
                :style="{ backgroundColor: scope.row.backgroundColor3, width: '100%' }"
                @click="$emit('currentRow', scope.row)"
              >
                <span style="width: 100%">{{ scope.row[columns.prop] }}</span>
              </div>

              <!-- 带图片的列 -->
              <div class="imgDiv" v-if="columns.type === 'img'">
                <el-image
                  hide-on-click-modal
                  preview-teleported
                  style="height: 26px"
                  :src="scope.row[columns.prop]"
                  :zoom-rate="1.2"
                  @click="imgClicked(scope.row[columns.prop], columns.srcList)"
                  :preview-src-list="columns.srcList"
                  :initial-index="imgIndex"
                  fit="cover"
                />
              </div>

              <!-- 单独日期列 -->
              <div v-else-if="columns.type === 'dateSingle'" @dblclick="$emit('currentRow1', scope.row, item.prop)">
                <el-date-picker
                  :disabled="!!columns.change"
                  v-model="scope.row[columns.prop]"
                  type="date"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  style="width: 100px"
                  @change="inputBlur(scope.row, columns.label, 'dateSingle')"
                />
              </div>

              <!-- 普通列 -->
              <div
                @click="(e: any) => $emit('currentRow', scope.row, columns, item)"
                @dblclick="$emit('currentRow1', scope.row)"
                :class="columns.blue && scope.row.blue ? 'blue' : ''"
                v-if="
                  !columns.type &&
                  !columns.bgColor &&
                  !columns.cfmFlag &&
                  !columns.change &&
                  !columns.backgroundColor &&
                  !columns.backgroundColor2 &&
                  !columns.backgroundColor3
                "
              >
                <el-input
                  v-if="scope.row.change"
                  v-model="scope.row[columns.prop]"
                  placeholder=""
                  size="small"
                  clearable
                  @change="inputBlur(scope.row, item.label, 'input')"
                  :disabled="scope.row.disable && columns.disable"
                  @focus="$emit('currentRow', scope.row)"
                  :id="`input-${item.prop + scope.$index}`"
                  @keydown="(event: any) => handleKeyDown(event, scope.$index, scope.row, item.prop)"
                ></el-input>
                <span
                  v-else-if="columns.change && !columns.backgroundColor && !columns.backgroundColor2 && !columns.backgroundColor3"
                  :style="{ backgroundColor: scope.row.change ? columns.change : 'white' }"
                >
                  {{ scope.row[columns.prop] }}
                </span>
                <span v-else>
                  {{ scope.row[columns.prop] }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 单表头 -->

        <el-table-column
          v-else
          align="center"
          :prop="(item as any).prop"
          :label="$t((item as any).label)"
          :width="(item as any).width"
          :show-overflow-tooltip="showToolTip"
          :sortable="item.sortable"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <!-- select列 -->
            <el-select
              v-if="item.type === 'select'"
              @click="clickSelect(scope.row, scope.row[item.prop].options)"
              size="small"
              ref="selectRef"
              v-model="scope.row[item.prop].selectValue"
              :disabled="scope.row.disable && item.disable"
              filterable
              @visible-change="(visible: boolean) => selectVisibleChange(visible, scope.row, item.label)"
              :filter-method="(val: any) => filterMethod(val, scope.row, scope.row[item.prop].options, scope.row[item.prop].PageModule, item)"
              :class="scope.row.backgroundColor99 && !item.disableBC ? scope.row.backgroundColor99 : 'white'"
              :allow-create="item.allowCreate"
              default-first-option
              placeholder=" "
              style="border: none"
              @input="emitSelectValue(scope.row, $event)"
              @change="$emit('selectValChange', scope.row)"
            >
              <el-option
                v-for="option in scope.row[item.prop].options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
                style="margin: 0 auto"
              >
                <span v-if="option.LeftLabel" style="float: left; margin-right: 15px">{{ option.LeftLabel }}</span>
                <span v-if="option.RightLabel" style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
                  >{{ option.RightLabel }}
                </span>
              </el-option>
              <PageModule
                v-if="scope.row[item.prop].PageModule === true"
                :PageData="{ total: scope.row[item.prop].total, pageSizeShow: true, buttonS: true }"
                :layout="'total, prev, pager'"
                @pageSizeChange="scope.row[item.prop].handleSizeChange"
                @pageChange="scope.row[item.prop].handleCurrentChange"
              />
              <template #empty>
                <slot name="selectSlot"></slot>
              </template>
            </el-select>

            <!-- checkbox列 -->
            <el-checkbox
              v-else-if="item.type === 'checkbox'"
              :disabled="!scope.row.change || item.disable"
              v-model="scope.row[item.prop]"
              size="large"
              @change="$emit('checkboxChange', item.prop, scope.row)"
            />

            <!-- 带背景颜色的列(有值就有颜色) -->
            <span
              v-else-if="item.bgColor"
              :style="{ backgroundColor: scope.row[item.prop] ? item.bgColor : 'white', width: '100%' }"
              @dblclick="$emit('currentRow1', scope.row)"
              @click="$emit('currentRow', scope.row)"
              >{{ scope.row[item.prop] }}
            </span>

            <!-- 带背景颜色的列（根据cfmFlag判断） -->
            <span
              v-else-if="item.cfmFlag"
              :style="{ backgroundColor: scope.row.cfmFlag || scope.row.change ? item.cfmFlag : '', width: '100%' }"
              @dblclick="$emit('currentRow1', scope.row)"
              @click="$emit('currentRow', scope.row)"
              >{{ scope.row[item.prop] }}
            </span>

            <!-- 带背景颜色的列（根据backgroundColor判断） -->
            <div
              @dblclick="$emit('currentRow1', scope.row, item.prop)"
              v-else-if="item.backgroundColor"
              :style="{ backgroundColor: scope.row.backgroundColor, width: '100%' }"
              @click="$emit('currentRow', scope.row, item.prop)"
            >
              <el-input
                v-if="scope.row.change && !item.change"
                v-model="scope.row[item.prop]"
                placeholder=""
                size="small"
                clearable
                @change="inputBlur(scope.row, item.label, 'backgroundColor')"
                :disabled="scope.row.disable && item.disable"
                :class="scope.row.backgroundColor"
                @paste="handlePaste(scope.row)"
                :id="`input-${item.prop + scope.$index}`"
                @keydown="(event: any) => handleKeyDown(event, scope.$index, scope.row, item.prop)"
              ></el-input>
              <span :class="item.red && scope.row.red ? 'red' : ''" v-else @dblclick="$emit('currentRow1', scope.row)" style="width: 100%">{{
                scope.row[item.prop]
              }}</span>
            </div>
            <div
              @dblclick="$emit('currentRow1', scope.row)"
              v-else-if="item.backgroundColor2"
              :style="{ backgroundColor: scope.row.backgroundColor2, width: '100%' }"
              @click="$emit('currentRow', scope.row)"
            >
              <el-input
                v-if="scope.row.change && !item.change"
                v-model="scope.row[item.prop]"
                placeholder=""
                size="small"
                clearable
                @change="inputBlur(scope.row, item.label, 'backgroundColor2')"
                :disabled="scope.row.disable && item.disable"
                :class="scope.row.backgroundColor2"
                @paste="handlePaste(scope.row)"
                :id="`input-${item.prop + scope.$index}`"
                @keydown="(event: any) => handleKeyDown(event, scope.$index, scope.row, item.prop)"
              ></el-input>
              <span v-else @dblclick="$emit('currentRow1', scope.row)">{{ scope.row[item.prop] }}</span>
            </div>
            <div
              @dblclick="$emit('currentRow1', scope.row)"
              v-else-if="item.backgroundColor3"
              :style="{ backgroundColor: scope.row.backgroundColor3, width: '100%' }"
              @click="$emit('currentRow', scope.row)"
            >
              <el-input
                v-if="scope.row.change && !item.change"
                v-model="scope.row[item.prop]"
                placeholder=""
                size="small"
                clearable
                @change="inputBlur(scope.row, item.label, 'backgroundColor3')"
                :disabled="scope.row.disable && item.disable"
                :class="scope.row.backgroundColor3"
                :id="`input-${item.prop + scope.$index}`"
                @paste="handlePaste(scope.row)"
                @keydown="(event: any) => handleKeyDown(event, scope.$index, scope.row, item.prop)"
              ></el-input>
              <span v-else @dblclick="$emit('currentRow1', scope.row)">{{ scope.row[item.prop] }} </span>
            </div>

            <!-- 带图片的列 -->
            <div class="imgDiv" v-else-if="item.type === 'img'">
              <!-- <el-image style="height: 26px" :src="url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="srcList" :initial-index="4" fit="cover" /> -->
              <el-image
                hide-on-click-modal
                preview-teleported
                :src="scope.row[item.prop]"
                :zoom-rate="1.2"
                @click="imgClicked(scope.row[item.prop], item.srcList)"
                :preview-src-list="item.srcList"
                :initial-index="imgIndex"
                fit="cover"
              />
            </div>

            <!-- 带多图片的列 -->
            <div class="imgDiv" v-else-if="item.type === 'imgs'">
              <div v-for="(item2, index) in scope.row[item.prop]" :key="index">
                <el-image
                  @click="imgClicked(item2, scope.row[item.prop])"
                  :preview-src-list="scope.row[item.prop]"
                  hide-on-click-modal
                  preview-teleported
                  :src="item2"
                  :zoom-rate="1.2"
                  :initial-index="imgIndex"
                  fit="cover"
                />
              </div>
            </div>

            <!-- 对钩和错误的列 -->
            <div class="imgDiv" v-else-if="item.type === 'svg'">
              <!-- 对钩 -->
              <svg
                v-if="scope.row[item.prop]"
                t="1721962134564"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1014"
                width="14"
                height="14"
              >
                <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#52C41A" p-id="1015"></path>
                <path
                  d="M178.614857 557.860571a42.496 42.496 0 0 1 60.123429-60.050285l85.942857 87.625143a42.496 42.496 0 0 1-60.050286 60.123428L178.614857 557.860571z m561.005714-250.148571a42.496 42.496 0 1 1 65.097143 54.637714L394.459429 725.577143a42.496 42.496 0 0 1-65.097143-54.637714l410.112-363.373715z"
                  fill="#FFFFFF"
                  p-id="1016"
                ></path>
              </svg>
              <!-- 错误 -->
              <svg
                v-else
                t="1721962076071"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6277"
                width="14"
                height="14"
              >
                <path
                  d="M512 0a512 512 0 0 0-512 512 512 512 0 0 0 512 512 512 512 0 0 0 512-512 512 512 0 0 0-512-512z"
                  fill="#FD6B6D"
                  p-id="6278"
                ></path>
                <path
                  d="M513.755429 565.540571L359.277714 720.018286a39.058286 39.058286 0 0 1-55.296-0.073143 39.277714 39.277714 0 0 1 0.073143-55.442286l154.331429-154.331428-155.062857-155.136a36.571429 36.571429 0 0 1 51.712-51.785143l365.714285 365.714285a36.571429 36.571429 0 1 1-51.785143 51.785143L513.755429 565.540571z m157.549714-262.582857a35.254857 35.254857 0 1 1 49.737143 49.737143l-106.057143 108.982857a35.254857 35.254857 0 1 1-49.883429-49.810285l106.203429-108.982858z"
                  fill="#FFFFFF"
                  p-id="6279"
                ></path>
              </svg>
            </div>
            <!-- 上传图片列 -->
            <el-upload
              v-else-if="item.type === 'upload'"
              class="avatar-uploader"
              drag
              :action="item.imgAction || '#'"
              :show-file-list="false"
              :disabled="scope.row.disable && item.disable"
              :on-success="(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => handleAvatarSuccess(response, uploadFile, uploadFiles, scope.row)"
              :before-upload="beforeAvatarUpload"
              :headers="{ Authorization: token }"
              :data="item.imgData || { style: scope.row.style, color: scope.row.color, photoPath: scope.row.photoPath } || ''"
              list-type="picture"
              :on-progress="uploadProgress"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <span v-else class="svg-container">
                <svg-icon name="ele-Plus" />
              </span>
            </el-upload>
            <!-- 粘贴图片列 -->
            <el-input v-else-if="item.type === 'paste'" type="textarea" v-model="pasteInput" @paste="(e: any) => handlePasteJ(scope.row, e)" />

            <!-- 下载图片列 -->
            <el-button v-else-if="item.type === 'download'" type="primary" size="default" class="primaryBth" @click="$emit('download', scope.row)"
              >点击下载</el-button
            >

            <!-- 查看派工明细 -->
            <el-button v-else-if="item.type === 'findDetail'" type="primary" size="default" class="primaryBth" @click="$emit('download', scope.row)"
              >查看派工明细</el-button
            >

            <!-- 操作列 -->
            <div v-else-if="item.type === 'function'">
              <el-button
                :style="{ backgroundColor: item2.bgColor }"
                v-for="item2 in item.prop"
                type="primary"
                size="default"
                class="primaryBth"
                @click="$emit('download', scope.row, item2)"
                >{{ item2.label }}</el-button
              >
            </div>

            <div v-else-if="item.type === 'functionRow'">
              <el-button
                :style="{ backgroundColor: item2.bgColor }"
                v-for="item2 in scope.row.functionRow"
                type="primary"
                size="default"
                class="primaryBth"
                @click="$emit('download', scope.row, item2)"
                >{{ item2.label }}</el-button
              >
            </div>

            <!-- 单独日期列 -->
            <div v-else-if="item.type === 'dateSingle'" @dblclick="$emit('currentRow1', scope.row, item.prop)">
              <el-date-picker
                :disabled="!!item.change"
                v-model="scope.row[item.prop]"
                type="date"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                style="width: 100px"
                @change="inputBlur(scope.row, item.label, 'dateSingle')"
              />
            </div>

            <!-- 单独颜色 -->

            <!-- 数字列 -->
            <div v-else-if="item.type === 'number'">
              <el-input-number v-model="scope.row[item.prop]" :precision="2" @change="inputBlur(scope.row, item.label, 'input')" />
            </div>

            <!-- 兜底列 -->
            <div
              :class="item.start ? 'start' : ''"
              @dblclick="$emit('currentRow1', scope.row, item.prop)"
              style="width: 100%"
              @click="(e: any) => $emit('currentRow', scope.row, scope, e, item.prop)"
              v-else
            >
              <el-input
                v-if="scope.row.change && !item.change"
                ref="inputRefs"
                v-model="scope.row[item.prop]"
                placeholder=""
                size="small"
                clearable
                @change="inputBlur(scope.row, item.label, 'input')"
                :disabled="scope.row.disable && item.disable"
                @paste="handlePaste(scope.row)"
                @keydown="(event: any) => handleKeyDown(event, scope.$index, scope.row, item.prop)"
                :id="`input-${item.prop + scope.$index}`"
                :type="item.textarea ? 'textarea' : 'text'"
                :autosize="{ minRows: 4 }"
              ></el-input>
              <span
                :class="item.red && scope.row.red ? 'red' : item.blue && scope.row.blue ? 'blue' : ''"
                v-else-if="item.change && !item.backgroundColor && !item.backgroundColor2 && !item.backgroundColor3"
              >
                {{ scope.row[item.prop] }}
              </span>
              <span :class="item.red && scope.row.red ? 'red' : item.blue && scope.row.blue ? 'blue' : ''" style="width: 100%" v-else>
                {{ scope.row[item.prop] }}
              </span>
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
  <ul v-show="visible" class="contextmenu">
    <li @click="visible = false" :icon="Plus" style="padding: 7px 16px">关闭菜单</li>
    <li @click="reFresh" :icon="Plus" style="padding: 7px 16px">刷新页面</li>
    <li @click="unShowColumn" :icon="Plus" style="padding: 7px 16px">隐藏当前列</li>
    <el-scrollbar height="400px">
      <li v-for="item in upCaseFormList" :icon="Upload" style="padding: 0px" @click="updateTableHeader(item)">
        <el-checkbox v-model="item.showAndUnShow" :label="$t(item.label)" size="small" style="padding: 7px 16px; width: 100%" />
      </li>
    </el-scrollbar>
  </ul>
</template>
<script lang="ts">
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import { debounce } from 'lodash'
import { Delete, Edit, Search, Share, Upload, Plus, HotWater } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import {
  defineComponent,
  ref,
  type PropType,
  computed,
  onMounted,
  nextTick,
  toRefs,
  watch,
  onUnmounted,
  getCurrentInstance,
  onBeforeUnmount
} from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'Table'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import zhCn from '@/i18n/zh-cn.json'
import en from '@/i18n/en.json'
import vi from '@/i18n/viet.json'
import { useConfigureStore } from '@/stores/configure'
import service from '@/utils/request'
import {
  ElMessage,
  ElMessageBox,
  ElTable,
  translate,
  type UploadFile,
  type UploadFiles,
  type UploadProgressEvent,
  type UploadProps,
  type UploadRequestOptions
} from 'element-plus'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// 计算属性改为大写
const upCaseFormList = computed(() => {
  // props.tableHeader?.forEach((item: any, index: number) => {
  //   if (typeof item.inputValue === 'number' || typeof item.selectValue === 'number' || item.type === 'select1') {
  //   } else if (item.inputValue) {
  //     item.inputValue = item.inputValue
  //   } else if (item.selectValue) {
  //     item.selectValue = item.selectValue
  //   }
  // })

  // console.log(props.tableHeader)

  // 多语言
  props.tableHeader?.map((item: any, index: number) => {
    for (const key in zhCn.Table) {
      // 输入框
      if ((zhCn.Table as any)[key] === item.label || (en.Table as any)[key] === item.label) {
        item.label = `Table.${key}`
      }
    }
  })
  // TableHeader.value = props.tableHeader as any
  return props.tableHeader as any
})

const token = computed(() => {
  const token = sessionStorage.getItem('Authorization')
  if (token) {
    return token
  } else {
    return 'LTF_token'
  }
})
const pasteInput = ref()
const inputRefs = ref<any>([])
let top = ref(0)
let buttom = 0
const handleKeydown = (event: any) => {
  if (event.key === 'ArrowDown' || event.keyCode === 40) {
    event.preventDefault()
    const arr = Object.values(event.target.children) as any
    const index = arr.findIndex((item: any, index: any) => item.className === 'el-table__row current-row')

    // 如果当前选中行不是最后一行
    if (index < arr.length - 1) {
      arr.forEach((item: any) => {
        item.className = 'el-table__row'
        item.style.backgroundColor = 'initial'
        item.style.color = 'initial'
        item.classList.remove('current-row') // 移除 current-row 类
      })
      arr[index + 1].className = 'el-table__row current-row'
      const previousRowHeight = arr[index + 1].getBoundingClientRect().height
      if (index === 0) {
        top.value = 0
      } else {
        top.value += previousRowHeight
      }
      // 判断是否需要滚动到表格外面
      if (top.value >= 0) {
        multipleTableRef.value.setScrollTop(top.value)
        multipleTableRef.value.scrollTop = top.value // 同步更新滚动条位置
      }
      emits('currentRow', (props.tableData as any)[index + 1])
    }
  } else if (event.key === 'ArrowUp' || event.keyCode === 38) {
    event.preventDefault()
    const arr = Object.values(event.target.children) as any
    const index = arr.findIndex((item: any, index: any) => item.className === 'el-table__row current-row')

    // 如果当前选中行不是第一行
    if (index > 0) {
      arr.forEach((item: any) => {
        item.className = 'el-table__row'
        item.style.backgroundColor = 'initial'
        item.style.color = 'initial'
        item.classList.remove('current-row') // 移除 current-row 类
      })
      const previousRowHeight = arr[index - 1].getBoundingClientRect().height
      if (index === 0) {
        top.value = 0
      } else {
        top.value -= previousRowHeight
      }
      // 判断是否需要滚动到表格外面
      if (top.value >= 0) {
        multipleTableRef.value.setScrollTop(top.value)
        multipleTableRef.value.scrollTop = top.value // 同步更新滚动条位置
      }
      arr[index - 1].className = 'el-table__row current-row'
      emits('currentRow', (props.tableData as any)[index - 1])
    }
  }
}

// 右键菜单
const visible = ref(false)
const currentColumn = ref({}) as any
function openMenu(column: any, e: any) {
  e.preventDefault()
  currentColumn.value = column
  const menu = document.querySelector('.contextmenu') as HTMLElement
  console.log(column, document.querySelectorAll('.contextmenu'), e)

  document.querySelectorAll('.contextmenu').forEach((item: any) => {
    item.style.left = e.clientX - 210 + 'px'
    item.style.top = e.clientY - 100 + 'px'
  })
  // menu.style.left = e.clientX - 210 + 'px'
  // menu.style.top = e.clientY - 210 + 'px'
  // console.log(menu.style.left, menu.style.top)

  visible.value = true
}
const unShowColumn = () => {
  visible.value = false
  const res = TableHeader.value.findIndex((item: any) => item.label === currentColumn.value.label) as number
  TableHeader.value.splice(res, 1)

  const key = props.tableHeader?.map((item: any) => item.label)
  localStorage.setItem(JSON.stringify(key), JSON.stringify(TableHeader.value))
}
const reFresh = () => {
  document.location.reload()
}
const updateTableHeader = (column: any) => {
  if (column.showAndUnShow === true) {
    let res = TableHeader.value.findIndex((item: any) => item.label === column.label) as number
    TableHeader.value.splice(res, 1)
    const key = props.tableHeader?.map((item: any) => item.label)
    localStorage.setItem(JSON.stringify(key), JSON.stringify(TableHeader.value))
    // 合计模块
    if (props.selection) res++
    // 处理合计随着表头变化，并且如果这一列隐藏，那么这一列的合计也隐藏
    props.summaryData?.forEach((item: any) => {
      if (item.index === res) {
        // 从props.summaryData中删除item
        props.summaryData?.splice(
          props.summaryData?.findIndex((item: any) => item.index === res),
          1
        )
        item.index--
      } else {
        item.index--
      }
    })
  } else {
    let res = (tableHeaderList.value as any).findIndex((item: any) => item.label === column.label) as number
    const coverColumn = (tableHeaderList.value as any).find((item: any) => item.label === column.label) as number
    TableHeader.value.splice(res, 0, coverColumn)
    const key = props.tableHeader?.map((item: any) => item.label)
    localStorage.setItem(JSON.stringify(key), JSON.stringify(TableHeader.value))
    // 合计模块
    if (props.selection) res++
    props.summaryData?.forEach((item: any) => {
      item.index++
    })
    copySummaryData.value.forEach((item: any) => {
      if (item.index === res) {
        props.summaryData?.splice(
          copySummaryData.value.findIndex((item: any) => item.index === res),
          0,
          copySummaryData.value[copySummaryData.value.findIndex((item: any) => item.index === res)]
        )
      }
    })
  }
}
const tableHeaderList = ref([]) as any

const handlePaste = (row: any) => {
  emits('emithandlePaste', row)
}
const handlePasteJ = (row: any, e: any) => {
  emits('handlePasteJ', row, e)
}

const emitSelectValue = debounce((row: any, e: any) => {
  emits('emitSelectValue', e.target.value, row)
}, 1000)

// 点击变色
const handleRowClick = (row?: any, column?: any, event?: any) => {
  // 获取当前点击的行
  const clickedRow = event.currentTarget

  // 获取当前点击行的父元素（表格行所在的父元素）
  const parentElement = clickedRow.parentElement

  // 获取同级的其他行
  const siblingRows = Array.from(parentElement.children).filter((row) => row !== clickedRow)

  // 清除之前的高亮样式
  siblingRows.forEach((row: any) => {
    row.classList.remove('current-row') // 移除 current-row 类
  })

  // 为当前点击的行添加高亮样式
  clickedRow.style.backgroundColor = 'yourHighlightColor' // 设置你想要的高亮颜色
  clickedRow.style.color = 'yourHighlightTextColor' // 设置你想要的高亮文本颜色
  clickedRow.classList.add('current-row') // 添加 current-row 类

  // // 计算滚动距离
  const currentRowHeight = clickedRow.getBoundingClientRect().height
  const rowIndex = Array.from(parentElement.children).indexOf(clickedRow)

  const scrollTop = rowIndex * currentRowHeight

  top.value = scrollTop
  // 触发 currentRow 事件并传递当前行数据
  // emits('currentRow', row, currentRowHeight)
}

// props传入模块
interface selectOptionsType {
  key: string
  label: string
  value: string
}
interface tableHeader {
  prop: any
  width?: string | undefined
  label: string
  sortable?: boolean
  type?: string
  selectOptions?: selectOptionsType[]
  fixed?: string
  bgColor?: string
  cfmFlag?: string
  img?: boolean
  srcList?: string[]
  Multistage?: boolean
  children?: tableHeader[]
  imgAction?: string
  change?: string
  backgroundColor?: string
  backgroundColor2?: string
  backgroundColor3?: string
  tooltipVal?: string
  disable?: boolean
  disableBC?: boolean
  PageModule?: boolean
  allowCreate?: boolean
  imgData?: any
  disabled?: boolean
  allChange?: boolean
  tableSelect?: any
  red?: any
  showAndUnShow?: any
}
type TableHeaderType = tableHeader[]
const props = defineProps({
  isSingleSelect: {
    type: Boolean,
    default: false
  },
  cellClassName: {
    type: Function,
    required: false,
    default: () => {}
  },
  TableHeight: {
    type: Number as PropType<number>,
    required: false,
    default: 100
  },
  outTableHeight: {
    type: Number as PropType<number>,
    required: false,
    default: 80
  },
  tableColumns: Array,
  tableData: Array,
  tableHeader: [Array] as PropType<TableHeaderType>,
  selection: Boolean,

  summary: Boolean,
  summaryData: Array,
  isLoading: {
    required: true,
    type: Boolean,
    default: false
  },
  getTableList: {
    type: Function as any
  },
  clearSelection: {
    type: Function as any
  },
  showToolTip: {
    type: Boolean,
    default: true
  },
  tableClass: {
    type: Boolean,
    default: false
  },
  rowKey: {
    type: String,
    default: ''
  }
})

const TableHeader = ref()

const showToolTip = ref([])

const doubleCount = computed(() => {
  return '订购单号' // 这里 'label.greeting' 是你在 i18n 中定义的翻译键
})

// 拖动表头函数
const headerDragend = (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
  const colLabelEn = t(column.label) // 传入中文标签，获得英文

  const key = props.tableHeader?.map((item: any) => item.label)
  TableHeader.value.forEach((item: any, index: number) => {
    console.log(item.label, column.label)
    item.label3 = t(item.label)
    if (item.label3 === colLabelEn && newWidth) {
      console.log(newWidth)
      item.width = newWidth
    }
  })
  localStorage.setItem(JSON.stringify(key), JSON.stringify(TableHeader.value))
}
const copySummaryData = ref([])
onMounted(() => {
  getTableData()
})

const getTableData = () => {
  if (localStorage.getItem(JSON.stringify(props.tableHeader?.map((item: any) => item.label)))) {
    TableHeader.value = JSON.parse(localStorage.getItem(JSON.stringify(props.tableHeader?.map((item: any) => item.label)))!)
  } else {
    TableHeader.value = JSON.parse(JSON.stringify(props.tableHeader))
    if (props.tableHeader?.find((item: any) => item.srcList)) {
      TableHeader.value.unshift(props.tableHeader?.find((item: any) => item.srcList))
      let count = 0
      TableHeader.value.forEach((item: any, index: any) => {
        if (item.label === 'Table.image') {
          if (count === 1) {
            TableHeader.value.splice(index, 1)
          }
          count++
        }
      })
    }
  }
  // 右键菜单
  tableHeaderList.value = (props.tableHeader as any).map((item: any) => {
    if (!TableHeader.value.find((item2: any) => item2.label === item.label)) {
      item.showAndUnShow = false
    } else {
      item.showAndUnShow = true
    }
    return item
  })
}
watch(
  () => props.tableData,
  () => {
    multipleTableRef.value!.setCurrentRow(props.tableData?.[0])
  }
)
watch(
  () => props.tableHeader,
  () => {
    getTableData()
  }
)

// 适配模块
const height = ref()
function setFit() {
  // card里面除了表格的高度
  // 表格实际占的高 = 屏幕高度 - card之外的高 - card的padding（20px,上下各10px） - card里面除了表格的高度
  let contentHeight = innerHeight - (document.getElementsByClassName('find')[0]?.clientHeight + 107 + 10) - 20 - props.outTableHeight
  if (document.getElementsByClassName('find').length === 2) {
    contentHeight =
      innerHeight -
      (document.getElementsByClassName('find')[0]?.clientHeight + 107 + 10 + document.getElementsByClassName('find')[1]?.clientHeight) -
      20 -
      props.outTableHeight
  }

  height.value = (contentHeight * props.TableHeight) / 100
  // //  主体的高度
  // const mainContainerHeight = data.height;
  // // 导航的高度
  // const navHeight = data.x;
  // //  内容高度
  // const contentHeight = mainContainerHeight - navHeight;
  // // vh,px 30 === 30%
  // // 30  tableHeight
  // const tableHeight = 30;
  // const itemHeight = (contentHeight * tableHeight) / 100;
}
onMounted(() => {
  setFit()
})

let clientWidth = ref(document.body.clientWidth)
window.onresize = () => {
  return setFit()
}

// 修改表格标题样式
const headerStyle = ({ row, column, rowIndex, columnIndex }: any) => {
  return { color: 'inherit', padding: '0', height: '26px', 'border-right': 'none' }
}

// 修改表格体样式
const cellStyle = ({ row, column, rowIndex, columnIndex }: { row: any; rowIndex: number; column: TableColumnCtx<any>; columnIndex: number }) => {
  return { color: 'inherit', 'border-bottom': '0.5px solid var(--J-table-border-color)', padding: '0', height: '26px', width: '200px' }
}

// 表格总计函数
const getSummaries = (param: any) => {
  const { columns, data } = param
  const sums: string[] = []
  props.summaryData?.forEach((item: any) => {
    columns.forEach((column: any, index: any) => {
      if (index === 0) {
        sums[index] = '总计'
      }
      if (index === item.index) {
        sums[index] = item.num
      }
    })
  })
  return sums
}
onMounted(() => {
  setTimeout(() => {
    if (props.summaryData) copySummaryData.value = JSON.parse(JSON.stringify(props.summaryData))
  }, 5000)
})
const imgIndex = ref(0)
// 点击图片
const imgClicked = (src: any, srcList: any) => {
  let index = srcList.findIndex((item: any) => item === src)
  imgIndex.value = index
}
// 传出模块
const emits = defineEmits([
  'currentRow',
  'selectList',
  'sortChange',
  'cancelChange',
  'confirmChange',
  'currentRow1',
  'focusInput',
  'clearSelection',
  'checkboxChange',
  'selectListShow',
  'selectListUnShow',
  'filterMethod',
  'selectValChange',
  'uploadImg',
  'successUpload',
  'inputChange',
  'download',
  'filterMethodSlot',
  'tableRef',
  'emitSelectValue',
  'emithandlePaste',
  'handlePasteJ',
  'toBottom',
  'toUp',
  'showContextMenu',
  'handleKeyDown'
])
const selectList = (selectedList: any) => {
  emits('selectList', selectedList, multipleTableRef.value)
  if (props.isSingleSelect) {
    multipleTableRef.value!.setCurrentRow(selectedList[selectedList.length - 1])
    if (selectedList.length <= 1) {
      return
    }
    multipleTableRef.value!.toggleRowSelection(selectedList[0], false)
    multipleTableRef.value!.setCurrentRow(selectedList[selectedList.length - 1])
  }
}

// 排序触发函数
const sortChange = (a: any) => {
  const { column, prop, order } = a
  emits('sortChange', order, prop, column)
}

// 修改单元格后失去焦点
const inputBlur = (row: any, currentLabel: any, type: string) => {
  // 不触发ElMessageBox
  if (row.disableConfirm) {
    // 表格下拉框修改后触发
    if (type === 'select') {
      emits('selectValChange', row, currentLabel)
    } else if (type === 'input' || type === 'backgroundColor' || type === 'dateSingle') {
      emits('inputChange', row, currentLabel)
    }
    return
  } else {
    ElMessageBox.confirm('是否修改？', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        emits(
          'confirmChange',
          row,
          (i: any) => {
            props.getTableList()
            document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
          },
          currentLabel
        )
        document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消修改'
        })
        props.getTableList()
        document.querySelectorAll('.el-input__inner').forEach((item: any) => item.blur())
      })
  }
}

// 上传图片模块
const imageUrl = ref('')
const handleAvatarSuccess = (response: any, uploadFile: any, uploadFiles: any, row: any) => {
  emits('successUpload', response.data, row)
  JMessage.success(response.message)
  props.getTableList()
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    JMessage.error('图片最大2MB')
    return false
  }
  return true
}
const uploadProgress = (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => {}
// 多选框是否可以勾选
const selectable = (row: any, index: any) => {
  if (row.change === null) {
    return false
  } else {
    return true
  }
}

// // 筛选下拉框取消全部选择
// onMounted(() => {
//   emits('clearSelection', () => {
//     multipleTableRef.value!.clearSelection()
//   })
// })
// const multipleTableRef = ref<InstanceType<typeof ElTable>>()

// 筛选下拉框中的数据
const selectLoading = ref(false)
const filterMethod = debounce((val: any, row: any, selectOptions: any, PageModule: boolean, item: any) => {
  // 如果下拉框有分页器，就给后端做
  if (PageModule) {
    emits('filterMethod', val, row, item)
  } else if (item.slot) {
    emits('filterMethodSlot', val, row, item)
  } else {
    if (!selectOptions) return
    selectOptions.splice(0) // 删除selectOptions
    copyOptions.value
      .filter((item: any) => item.value.indexOf(val) !== -1)
      .forEach((item: any) => {
        selectOptions.push(item)
      })
  }
})

let copyOptions = ref([])
const clickSelect = (row: any, selectOptions: any) => {
  if (selectOptions) {
    copyOptions.value = JSON.parse(JSON.stringify(selectOptions))
  }
  emits('currentRow', row)
}
const copyFn = (selectOptions: any) => {
  copyOptions.value = JSON.parse(JSON.stringify(selectOptions))
}

// 下拉框显示与隐藏触发函数
const selectVisibleChange = (visible: boolean, row: any, item: any) => {
  emits('selectListShow', row, visible, item, copyFn)
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>() as any
onMounted(() => {
  emits('tableRef', multipleTableRef.value)
})

const handleKeyDown = async (event: any, rowIndex: number, row: any, prop: any) => {
  await nextTick()

  const inputs = multipleTableRef.value

  if (event.key === 'ArrowDown') {
    const myparentElement = document.getElementById(`input-${prop}${rowIndex + 1}` as any)?.parentElement!.parentElement!.parentElement!
      .parentElement!.parentElement!.parentElement

    // 获取同级的其他行
    if (myparentElement) {
      const siblingRows = Array.from(myparentElement!.parentElement!.children).filter((row) => row !== myparentElement)
      myparentElement?.classList.add('current-row')
      // 遍历同级的其他行，并可以对它们进行操作
      siblingRows.forEach((row: any) => {
        // 在这里添加您想要对同级其他行进行的操作
        row.style.backgroundColor = 'initial'
        row.style.color = 'initial'
        row.classList.remove('current-row') // 移除 current-row 类
      })
    }

    const element = props.tableData[rowIndex + 1]

    if (element) {
      // 计算下一个行索引
      const nextRowIndex = rowIndex + 1

      // 确保下一个索引在范围内
      if (nextRowIndex < props.tableData?.length!) {
        // 通过 v-for 中的 :ref 属性获取下一个输入框
        const nextInput = document.getElementById(`input-${prop}${rowIndex + 1}`)
        if (nextInput) {
          ;(nextInput as HTMLInputElement).focus() // 将焦点设置到下一个输入框
          setTimeout(() => {
            ;(nextInput as HTMLInputElement).select() // 选中输入框中的值
          }, 0) // 0 毫秒的延迟
        }
      } else {
      }
    }

    emits('toUp', event, rowIndex, multipleTableRef.value, row, prop)
  } else if (event.key === 'ArrowUp') {
    const element = props.tableData[rowIndex - 1]

    if (element) {
      // 计算下一个行索引
      const nextRowIndex = rowIndex - 1

      // 确保下一个索引在范围内
      if (nextRowIndex < props.tableData?.length!) {
        // 通过 v-for 中的 :ref 属性获取下一个输入框
        const nextInput = document.getElementById(`input-${prop}${rowIndex - 1}`)

        if (nextInput) {
          ;(nextInput as HTMLInputElement).focus() // 将焦点设置到下一个输入框
          setTimeout(() => {
            ;(nextInput as HTMLInputElement).select() // 选中输入框中的值
          }, 0) // 0 毫秒的延迟
        }
      } else {
      }
    }
    const myparentElement = document.getElementById(`input-${prop}${rowIndex - 1}` as any)?.parentElement!.parentElement!.parentElement!
      .parentElement!.parentElement!.parentElement

    // 获取同级的其他行
    if (myparentElement) {
      const siblingRows = Array.from(myparentElement!.parentElement!.children).filter((row) => row !== myparentElement)
      myparentElement?.classList.add('current-row')
      // 遍历同级的其他行，并可以对它们进行操作
      siblingRows.forEach((row: any) => {
        // 在这里添加您想要对同级其他行进行的操作
        row.style.backgroundColor = 'initial'
        row.style.color = 'initial'
        row.classList.remove('current-row') // 移除 current-row 类
      })
    }

    // myparentElement?.classList.add('current-row')
    // // 遍历同级的其他行，并可以对它们进行操作
    // siblingRows.forEach((row: any) => {
    //   // 在这里添加您想要对同级其他行进行的操作
    //   row.style.backgroundColor = 'initial'
    //   row.style.color = 'initial'
    //   row.classList.remove('current-row'); // 移除 current-row 类
    // })

    emits('toBottom', event, rowIndex, multipleTableRef.value, row, prop)
  } else if (event.key === 'Enter' || event.keyCode === 13) {
    emits('handleKeyDown', event, rowIndex, row, prop)
  }
}
// 多级表头
// {
//   Multistage: true,
//   label: '大底',
//   children: [
//     {
//       label: '欠数',
//       prop: 'customer',
//     }, {
//       label: '计划',
//       prop: 'customer',
//     }, {
//       label: '实际',
//       prop: 'customer',
//     },
//   ]
// },

// 表格带下拉框的列
// const tableHeader = ref([
//   {
//     label: '客户',
//     prop: 'customer',
//     width: '69px',
//   },
//   {
//     type: 'select',
//     label: '蹇泽阳',
//     prop: 'name',
//     width: '150px',
//   }
// ])
// const tableData = ref([
//   {
//     customer: '2023-5-5002',
//     name: {
//       selectValue: 'option1',
//       options: [{
//         key: '1',
//         label: 'option1',
//         value: '111111'
//       },
//       {
//         key: '2',
//         label: 'option2',
//         value: '22222222222'
//       }]
//     },
//   },
//   {
//     customer: '2023-5-5002',
//     name: {
//       selectValue: 'option2',
//       options: [{
//         key: '1',
//         label: 'option2',
//         value: '222222'
//       }]
//     },
//   },
// ])

// 表格带复选框的列
// const tableHeader = ref([
//   {
//     label: '客户',
//     prop: 'customer',
//     width: '69px',
//   },
//   {
//     label: '单选列',
//     type: 'checkbox',
//     prop: 'checkboxArrange',
//     width: '69px',
//   }
// ])
// const tableData = ref([
//   {
//     customer: 'jzy',
//     checkboxArrange: true,
//   },
//   {
//     customer: 'jzyNB',
//     checkboxArrange: false,
//   }
// ])

// 带tooltip的列
// const tableHeader2 = ref([
//   {
//     type: 'tooltip',
//     label: '左',
//     prop: 'left',
//     width: '73'
//   },
//   {
//     type: 'tooltip',
//     label: '右',
//     prop: 'right',
//     width: '73'
//   }
// ])
// const tableData2 = ref([
//   {
//     instruction: '指令1',
//     itemNumber: '货号1',
//     instructionNumber: '指令数1',
//     position: '部位1',
//     segment: '段1',
//     preSupplementaryNumber: '预补双数1',
//     left: {
//       value: '1',
//       tooltipVal: `客人号 40  大底号 40`
//     },
//     right: {
//       value: '2',
//       tooltipVal: '客人号 42  大底号 42'
//     }
//   },
//   {
//     instruction: '指令2',
//     itemNumber: '货号2',
//     instructionNumber: '指令数2',
//     position: '部位2',
//     segment: '段2',
//     preSupplementaryNumber: '预补双数2',
//     left: {
//       value: '3',
//       tooltipVal: '客人号 50  大底号 50'
//     },
//     right: {
//       value: '4',
//       tooltipVal: '客人号 50  大底号 50'
//     }
//   },
// ])
</script>

<style lang="less" scoped>
.blue {
  color: #2700fd !important;
}
// 表格图片预览样式
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

// 靠左列样式
.start {
  :deep(.el-input__inner) {
    text-align: start !important;
  }

  text-align: start !important;
  justify-content: start !important;
}

// 右键菜单样式
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;

    &:hover {
      background: #eee;
    }
  }
}

:deep(.el-table td.el-table__cell div) {
  color: var(--el-text-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

:deep(.el-input--small) {
  --el-input-height: 26px;
  text-align: center;
}

:deep(.is-hovering) {
  background-color: #fff5eb;
  border: none;
  box-shadow: none;
}

:deep(.el-select__wrapper) {
  padding: 0;
  height: 100%;
  width: 100%;
  box-shadow: none;
  background-color: transparent;
}

:deep(.el-select__selected-item) {
  text-align: center;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

.\#FF8080 {
  :deep(.el-input__inner) {
    background-color: #ff8080 !important;
    height: 100%;
  }
}

.\#80E0E0 {
  :deep(.el-input__inner) {
    background-color: #80e0e0 !important;
    height: 100%;
  }
}

.\#FFE000 {
  :deep(.el-input__inner) {
    background-color: #ffe000 !important;
    height: 100%;
  }
}

.\#EAEFF5 {
  :deep(.el-input__inner) {
    background-color: #eaeff5 !important;
    height: 100%;
  }
}

.\#80c080 {
  :deep(.el-input__inner) {
    background-color: #80c080 !important;
    height: 100%;
  }
}

.highGreen {
  background-color: #80c080;
}

.\#ffc0ff {
  :deep(.el-input__inner) {
    background-color: #ffc0ff !important;
    height: 100%;
  }

  :deep(.el-input__wrapper) {
    background-color: #ffc0ff !important;
  }
}
:deep(tr.current-row > td.el-table__cell) {
  background-color: var(--J-table-current-row-bg-color);
}

// 合计样式
:deep(.el-table .el-table__cell) {
  // background-color: var(--J-table-current-row-bg-color);
  padding: 0;
}

.table {
  // 取消左侧边框
  :deep(.el-table__border-left-patch) {
    width: 0;
  }

  .imgDiv {
    height: 26px;
    width: 100%;

    .img {
      width: 70px;
      height: 26px;
    }
  }

  // tooltip样式
  .tooltip-base-box {
    width: 600px;
  }

  .tooltip-base-box .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .tooltip-base-box .center {
    justify-content: center;
  }

  .tooltip-base-box .box-item {
    width: 110px;
    margin-top: 10px;
  }

  //
  :deep(.el-input__wrapper) {
    box-shadow: none;
    background-color: transparent;
    padding: 0;
  }

  // 表格最上面边框
  :deep(.el-table--border .el-table__inner-wrapper::after) {
    opacity: 0;
  }

  // 表格底部边框
  :deep(.el-table__inner-wrapper::before) {
    opacity: 0;
  }

  // 总计增加边框
  :deep(.el-table__footer-wrapper) {
    border-top: none;
    border-left: 1px solid var(--el-table-border-color);
    border-bottom: 1px solid var(--el-table-border-color);
  }

  :deep(.el-table--border::before) {
    position: relative;
  }

  // 表格最外边框
  :deep(.el-table--border.el-table--group) {
    border: none;
  }

  // 头部边框
  :deep(.customer-table thead tr th.is-leaf) {
    // border: 1px solid #EBEEF5;
    border-right: none;
  }

  // 取消左侧头部边框
  :deep(.el-table--border .el-table__inner-wrapper tr:first-child th:first-child) {
    border-left: none;
  }

  // 表格最外层边框-底部边框
  :deep(.el-table--border::after, .el-table--group::after) {
    width: 0;
  }

  :deep(.customer-table::before) {
    width: 0;
  }
}

:deep(.el-input) {
  --el-input-focus-border: #fff;
  --el-input-transparent-border: 0 0 0 0px;
  --el-input-border-color: #fff;
  --el-input-hover-border: 0px !important;
  --el-input-hover-border-color: #fff;
  --el-input-focus-border-color: #fff;
  --el-input-clear-hover-color: #fff;
  box-shadow: 0 0 0 0px !important;
  --el-input-border: 0px;
}

:deep(.el-select__wrapper:hover) {
  background-color: #fff5eb;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.el-select) {
  --el-select-border-color-hover: #fff;
}

:deep(.el-table__body-wrapper .el-table__body .el-table__row > td) {
  border-left: 1px solid var(--J-table-border-color);
}
</style>

<!-- 上传图片样式 -->
<style>
.avatar {
  height: 26px;
}

.avatar-uploader {
  height: 26px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-uploader .el-upload {
  height: 20px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.svg-container {
  font-size: 28px;
  color: #8c939d;
  width: 70px;
  text-align: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* vertical-align: middle; */
  /* display: inline-block; */
}

/* 用来设置当前页面element全局table 选中某行时的背景色*/

:deep(.el-input__prefix-inner) {
  display: none;
}
</style>
